<template>
    <div class="queryContent">

        <el-row class="form-query-box">
            <el-col :span="21" class="form-query">
                <el-form ref="form" :model="localQueryObj" size="mini">
                    <el-col :span="7">      
                        <el-form-item label="现职称等级" label-width="140px">
                            <el-select size="mini" v-model="localQueryObj.curAcademicName" @change="findAcademicTypeOptions()" placeholder="请选择">
                                <el-option
                                v-for="item in titlesTypeOptions"
                                :key="item"
                                :label="item"
                                :value="item">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label="拟参评职称等级" label-width="140px">
                            <el-select size="mini" v-model="localQueryObj.recordTitle" placeholder="请选择">
                                <el-option
                                v-for="item in academicTypeOptions"
                                :key="item"
                                :label="item"
                                :value="item">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label="目标岗位：" label-width="140px">
                            <el-select size="mini" v-model="localQueryObj.categoryType" placeholder="请选择">
                                <el-option
                                v-for="item in categoryTypeListOptions"
                                :key="item"
                                :label="item"
                                :value="item">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label="姓名" label-width="140px">
                            <el-input size="mini" v-model="localQueryObj.userName" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>

                </el-form>
            </el-col>
            
            <div class="query-bar">
                <el-button ref="queryButton" type="primary" size="small" @click="queryData()" round>查询</el-button>
            </div>

        </el-row>

    </div>
</template>

<script>

import { participationFindTitlesTypePost,participationFindAcademicTypePost,participationFindCategoryTypePost } from '@/service/api'
import Qs from 'qs'

export default {
    props:{
        formQuery:{
            Object:Object,    // 属性值类型必须是Object；可选的类型有：String、Number、Object、Array等
            // required:true, // 此属性值为必填; 使用当前组件时，若未传入此值就会报错
        },
        allowAllFieldList:{
            Object:Array,    // 属性值类型必须是Object；可选的类型有：String、Number、Object、Array等
            // required:true, // 此属性值为必填; 使用当前组件时，若未传入此值就会报错
        }, 
    },
    data(){
        return {
            localQueryObj:{
                userName:"",
                curAcademicName: '',    // 现职称等级
                recordTitle: '',     // 拟参评职称等级
                categoryType: '',    // 目标岗位
                hasPass:false,       // 是否符合条件： true 符合，false 不符合 null 全部
            },
            defaultQueryObj:this.formQuery,

            titlesTypeOptions:[],       // 职称名称列表
            academicTypeOptions:[],     // 拟参评职称等级列表
            categoryTypeListOptions:[], // 岗位列表

            isAutoExcuteQuery:false,
        }
    },
    created(){
        this.isAutoExcuteQuery = true;
    },
    mounted(){
        // this.localQueryObj = JSON.parse(JSON.stringify(this.formQuery));
        this.loadOptionslist();
        this.$refs.queryButton.$el.style.display = "none";
        if(this.defaultQueryObj !== undefined){
            this.localQueryObj.userName = this.defaultQueryObj.userName;
        }

    },
    methods:{

        // 职称名称列表
         loadOptionslist:function(){
            participationFindTitlesTypePost().then(res => {
                if(res.code == 200){
                    this.titlesTypeOptions = res.data;

                    if(this.defaultQueryObj == undefined){
                        this.localQueryObj.curAcademicName = res.data[0];
                    }else{
                        this.localQueryObj.curAcademicName = this.defaultQueryObj.curAcademicName;
                    }
                    this.findAcademicTypeOptions();
                }
            });
        },
        
        // 拟参评职称等级列表
        findAcademicTypeOptions:function(){
            var curAcademicName = this.localQueryObj.curAcademicName;
            if(curAcademicName == undefined){
                curAcademicName = "";
            }
            var params = {titleName:curAcademicName};
            participationFindAcademicTypePost(Qs.stringify(params)).then(res => {
                if(res.code == 200){
                    this.academicTypeOptions = res.data;

                    if(this.defaultQueryObj == undefined){
                        this.localQueryObj.recordTitle = res.data[0];
                    }else{
                        this.localQueryObj.recordTitle = this.defaultQueryObj.recordTitle;
                    }
                    this.findCategoryTypePost();
                }
            });
        },
        findCategoryTypePost:function(){

            // 职称岗位列表
            participationFindCategoryTypePost().then(res => {
                if(res.code == 200){
                    this.categoryTypeListOptions = res.data;
                    if(this.allowAllFieldList.indexOf("categoryType") !== -1){
                        this.categoryTypeListOptions.unshift("全部");
                    }

                     if(this.defaultQueryObj == undefined){
                        this.localQueryObj.categoryType = res.data[0];
                    }else{
                        this.localQueryObj.categoryType = this.defaultQueryObj.categoryType;
                    }
                    
                    if(this.$refs.queryButton != undefined){
                        this.$refs.queryButton.$el.style.display = "inline-block";
                    }
                    if(this.isAutoExcuteQuery){
                        this.isAutoExcuteQuery = false;
                        this.$emit('queryHandle',this.localQueryObj);
                    }
                    
                }
            });
        },
        queryData(){
            this.$emit('queryHandle',this.localQueryObj);
        }
    },
    watch: {
        // 监听外部对value的改变
        // formQuery(){
        //     this.localQueryObj = JSON.parse(JSON.stringify(this.formQuery));
        // }
    }
    
}
</script>

<style scoped>

.queryContent{
    display: flex;
    margin-top:40px;
}

.el-select{
    width: 100%;
}
.query-bar >>> .el-button {
    width: 80px;
}


</style>